<template>
  <view
    class="hb-relative hb-p-3 hb-bg-white hb-mb-4 hb-rounded-xl hb-flex hb-items-center hb-box-shadow-base"
    @click="emits('click')"
  >
    <slot />
    <view
      v-if="showSetting"
      class="hb-w-10 hb-h-10 hb-absolute hb-right-0 hb-top-0 hb-z-10"
      @click.stop="emits('setting', item)"
    ></view>
    <view class="hb-relative hb-w-16 hb-h-16 hb-overflow-hidden hb-rounded-lg hb-flex-shrink-0">
      <TmImage
        v-if="item.isActivate === 0"
        class="hb-absolute hb-left-0 hb-top-0 hb-z-10"
        src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/saas-ai/unactivated.png"
        :width="128"
        :height="128"
      />
      <TmImage :src="item.iconFileUrl" :width="128" :height="128" />
    </view>
    <view
      class="hb-justify-between hb-ml-3 hb-h-16 hb-flex hb-flex-col hb-justify-between hb-flex-1 hb-overflow-hidden"
    >
      <view class="hb-flex hb-items-center hb-justify-between">
        <TmText _class="text-overflow-1 hb-font-bold" :label="item.displayName" :font-size="32" />
        <TmIcon v-if="showSetting" name="ali-icon icon-shezhi1" color="#969799" :size="32" />
      </view>
      <TmText
        _class="text-overflow-1"
        color="#969799"
        :label="`原名：${item.botName}`"
        :font-size="24"
      />
      <scroll-view
        class="hb-w-full"
        scroll-x
        enable-passive
        enhanced
        :show-scrollbar="false"
        enable-flex
      >
        <view class="hb-flex hb-gap-2">
          <RoleTag
            v-if="item.roleType === RoleTypeEnum.SUPER_ADMIN"
            type="superAdmin"
            text="超级管理员"
          />
          <RoleTag v-else-if="item.roleType === RoleTypeEnum.ADMIN" type="admin" text="管理员" />
          <RoleTag v-if="item.identityName" type="superAdmin" :text="item.identityName" />
          <!-- 认证 -->
          <AuthenticationTag :certification-type="item.certificationType" />
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { CircleMemberListResult } from '@/api/contact/types';
  import { RoleTypeEnum } from '@/enums/LoginEnum';

  defineProps<{
    item: CircleMemberListResult;
    showSetting?: boolean;
  }>();

  const emits = defineEmits<{
    (e: 'setting', item: CircleMemberListResult): void;
    (e: 'click'): void;
  }>();
</script>

<style scoped></style>
